import React, {memo, useEffect, useState} from 'react';
import CompositePagesStyle from "./IndexStyle";
import {useLocation, useParams} from "react-router-dom";
import PagesStructure from "../../components/part/pagesStructure/PagesStructure";
import {Enhance} from "./Enhance";
import CommentShowList from "../../components/part/commentShowList/CommentShowList";


/**
 * 时间 2024年1月26日 15点35分
 * 复合页面
 * 关于项目中 专辑 歌单 歌曲的详情页
 * 共同点整体页面结构一致,
 *
 * 具体小模块有不同
 *
 * 如何写代码逻辑？？？
 * 1.将每一个子模块重新抽出来，然后通过props进行分别渲染
 *    这种方式就要求我们使用高阶组件来进行条件判断，当
 *    当然我们也可以在本页面中进行判断，但是不好
 * 2.全部渲染，通过不同的属性字段进行特定渲染
 *    通过props进行限制传入一个页面中
 *    这种方式优点 逻辑简单，缺点，dom渲染多，导致性能下降
 *
 *
 * 我们使用插槽,通过插槽和props来传递参数
 * 关于复合页面的 type 说明
 * type=1 表示歌曲详情页
 * type=2 表示歌单详情页
 * type=3 表示专辑详情页
 * type=4 表示歌手详情页
 *
 * 我们来尝试使用react中的高阶组件来实现
 */
type Props = {};

export default memo(function CompositePages(props: Props) {
  //注意,当我们每次进入复合页面时,重新回到顶部
  useEffect(() => {
    window.scroll(0,0);
  }, []);
  const query=useLocation();
  // 获取type和id,其中type用于展示页面类型,id用于请求接口获取数据
  const {type,id} = query.state;
  const TempEnhance=Enhance(PagesStructure,type,id);
  return (
    <CompositePagesStyle>
      <TempEnhance />
      {
        type!==4?<CommentShowList commentId={id} type={type}/>:""
      }
    </CompositePagesStyle>
  );
});
